<template>
	<div class="register" style="background-image: url(../../public/san0.webp);">
		<div class="register_box">
			<!-- 手机 -->
			<div>
				<div>
					手机号
					<input
						type="text"
						v-model.lazy="text"
						name=""
						placeholder="请输入手机号"
					/>
				</div>

				<p v-if="showtel" class="tel">*请输入正确的手机号</p>
			</div>

			<!-- 密码 -->
			<div>
				<div>
					密码
					<input
						type="password"
						v-model.lazy="password"
						name=""
						placeholder="请输入密码"
					/>
				</div>

				<p v-if="showpsword" class="psword">
					*密码最少八个字符并且包含字母和数字
				</p>
			</div>

			<!-- 确认密码 -->
			<div>
				<div>
					确认密码
					<input
						type="password"
						v-model.lazy="password2"
						name=""
						placeholder="请输入确认密码"
					/>
				</div>

				<p v-if="showpsword2" class="queren">
					*两次密码不一致,请重新输入
				</p>
			</div>

			<!-- 获取验证码 -->
			<div>
				<div class="jihuomabox">
					<div><span class="jihuoma">激活码</span></div>
					<div>
						<button @click="login1" class="getyanzheng">
							获取验证码
						</button>
					</div>
				</div>
			</div>

			<!-- 验证码 -->
			<div>
				<div>
					验证码
					<input
						type="password"
						v-model.lazy="setyanzheng"
						name=""
						placeholder="请输入验证码"
					/>
				</div>
				<p v-if="showyanzheng" class="yanzheng">*请输入正确的验证码</p>
			</div>

			<!-- 用户名 -->
			<div>
				<div>
					用户名
					<input
						type="text"
						v-model.lazy="myname"
						name=""
						placeholder=""
					/>
				</div>
				<!-- <p v-if="showyanzheng" class="yanzheng">*请输入正确的验证码</p> -->
			</div>

			<!-- 性别 -->
			<div id="mysex_box">
				<div>性别</div>
				<div class="mysex">
					男<input
						type="radio"
						name="mysex"
						@click="sexg('男')"
						placeholder=""
					/>
					女<input
						type="radio"
						name="mysex"
						@click="sexg('女')"
						placeholder=""
					/>
				</div>
				<!-- <p v-if="showyanzheng" class="yanzheng">*请输入正确的验证码</p> -->
			</div>

			<!-- 注册 -->
			<div class="register_button">
				<button @click="mylogin">注册</button>
			</div>

			<!-- <el-button type="text" @click="dialogVisible = true"
				>点击打开 Dialog</el-button
			>

			<el-dialog
				title="提示"
				:visible.sync="dialogVisible"
				width="30%"
				:before-close="handleClose"
			>
				<span>这是一段信息</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false"
						>确 定</el-button
					>
				</span>
			</el-dialog> -->
		</div>
	</div>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue';
let { proxy } = getCurrentInstance();
console.log(proxy);

//手机正则表达式
let text = ref('');
let showtel = ref(false);
watch(text, (newtext) => {
	let regtel = /^((0\d{2,3}-\d{7,8})|(1[35847]\d{9}))$/;
	showtel.value = !regtel.test(newtext);
});

// 密码正则表达式
let password = ref('');
let showpsword = ref(false);
watch(password, (newpassword) => {
	let regps = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
	showpsword.value = !regps.test(newpassword);
});

// 密码比对
let password2 = ref('');
let showpsword2 = ref(false);
watch(password2, (newpassword2) => {
	showpsword2.value = !(password2.value == password.value);
});

// 验证码比对
let setyanzheng = ref('');
let showyanzheng = ref(false);
watch(setyanzheng, (newsetyanzheng) => {
	let codeReg = /^[0-9]{6}$/;
	showyanzheng.value = !codeReg.test(newsetyanzheng);
});

// 用户名称
let myname = ref('');
watch(myname, () => {
	console.log(myname.value);
});

// 用户性别
let setsex = ref('');
let sexg = (sexh) => {
	setsex = sexh;
	console.log(setsex);
};

//验证码网络请求
let login1 = async () => {
	console.log(66666);
	console.log(text);
	let reg = /^1[3-9][0-9]{9}$/;
	if (!reg.test(text.value)) {
		alert('请输入正确的手机号');
		return false;
	}

	let res = await proxy.$axios.post('/egg/code', {
		tel: text.value,
	});
	console.log(res);

	let a = res.data.data;
	let c = res.data.code;
	let b = res.data.mycode;
	console.log(a);
	console.log(b);
	console.log(c);

	alert(`验证码:${a}`);
};

// 注册
let mylogin = async () => {
	if (
		showpsword2.value ||
		showpsword.value ||
		showtel.value ||
		showyanzheng.value
	) {
		return '密码或者手机号有问题';
	}

	console.log(text.value);
	console.log(password.value);
	console.log(myname.value);
	console.log(setsex.value);
	let res = await proxy.$axios.post('/egg/register', {
		tel: text.value,
		password: password.value,
		code: setyanzheng.value,
		nickname: myname.value,
		gather: setsex,
	});
	console.log(res);
	alert(res.data.data);
	//登录成功后跳转到首页
	if (res.data.code == 1) {
		window.location.href = 'http://localhost:5173/index';
	}
};

// let mylogin = () => {
// 	if (showpsword2.value || showpsword.value || showtel.value) {
// 		return '密码或者手机号有问题';
// 	}
// 	console.log(text.value);
// 	console.log(password.value);
// 	let res = proxy.$axios.post('/egg/register', {
// 		password: password.value,
// 		tel: text.value,
// 	});

// 	res.then((r) => {
// 		console.log(r);
// 	});
// };
</script>

<style scoped>
.register {
	display: flex;
	justify-content: center;
	/* align-items: center; */
	background-image: url(../../public/san0.webp);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 1600px;
	/* position: absolute; */
}
.register_box {
	width: 500px;
	height: 500px;
	background-color: rgb(255, 251, 251);
	position: fixed;
	margin-top: 40px;
	border-radius: 10px;
	font-family: 'Courier New', Courier, monospace;
	font-size: 15px;
	font-weight: 700;
}
input {
	height: 30px;
	width: 220px;
	outline: none; /* 移除默认边框 */
	border: 1px solid rgb(173, 173, 173);
	margin-left: 4px;
	border-radius: 2px;
	/* background-color: #edf2f5; */
}
.register_box > div {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-bottom: 10px;
}
.register_box > div:nth-child(1) {
	margin-top: 30px;
	margin-left: -16px;
}
/* .register_box > div:nth-child(2) {
} */
.register_box > div:nth-child(3) {
	margin-left: -34px;
}
.register_box > div:nth-child(4) {
	margin-right: 130px;
}

.register_box > div:nth-child(6) {
	margin-right: 16px;
}
.jihuomabox {
	width: 180px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.jihuoma {
	margin-left: 4px;
}

/* 第五个输入框 */
.register_box > div:nth-child(5) {
	margin-left: -18px;
}

.register_box > div > p {
	font-size: 8px;
	color: red;
	font-family: 'NSimSun';
}
.getyanzheng {
	height: 30px;
	width: 115px;
}
.register_button {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}
.register_button > button {
	background-color: #cdcdcd7c;
	width: 200px;
	height: 50px;
	/* border: 1px solid; */
	border-radius: 4px;
	font-size: 18px;
	font-weight: 700;
}

.tel {
	margin-left: -30px;
}
.psword {
	margin-left: 50px;
}
.queren {
	margin-left: 27px;
}

.yanzheng {
	margin-left: -32px;
}
#mysex_box {
	display: flex;
	flex-direction: row;
	padding-right: 84px;
}
.mysex {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 22px;
}
.mysex > input {
	width: 50px;
	height: 15px;
}
</style>
